<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="referrer" content="no-referrer">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="address=no">
	<script>
		(function() {
			var docEl = document.documentElement;
			var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
			function recalc() {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				console.log(innerWidth);
				if (innerWidth > 750) {
					docEl.style.fontSize = '10px';
				} else {
					docEl.style.fontSize = clientWidth / 7.5 + 'px';
				}
			}
			if (!document.addEventListener) return;
			window.addEventListener(resizeEvt, recalc, false);
			document.addEventListener('DOMContentLoaded', recalc, false);
		})()
	</script>
    <script type="text/javascript" charset="UTF-8"
        src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>
    <script src="./vue2.6.13.min.js"></script>
    <script src="./axios.min.js"></script>


    <style>
        #app img{
            width: 50px;
            height: 50px;
            margin: 0 auto;
            display: block;
            margin-top: 1rem;
        }
        #app p{
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin: 0.2rem 0 0.2rem;
        }

        .toast{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .toast span{
            border-radius: 0.1rem;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            padding: 0.1rem 0.15rem;
            max-width: 6rem;
            font-size: 0.28rem;
            text-align: center;
        }


        button{
            width: 160px;
            height: 40px;
            text-align: center;
            font-size: 17px;
            display: block;
            margin: 40px auto 0;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            background-color: #dda62f;
            color:#fff;
        }
        .debbug_msg{
            position: absolute;
            top: 10px;
            word-break: break-all;
        }
        .msg1{
            bottom: 10px;
        }
    </style>
</head>

<body>
	<div id="app">
        <img src="https://jdkj-1306681707.cos.ap-nanjing.myqcloud.com/S0000260/image/imgpption_128_128_1.00_end_202508271530391944.png" alt="">
        <p> 支付成功 {{orderInfo.FMoney ? orderInfo.FMoney + ' 元' : '' }} </p>
        <button v-if="orderInfo.FServiceFlag == '6' && platform == 'wechat' && !isWxMini" @click="continueSign">继续签约</button>
        <!-- <button v-if="isWxMini" @click="backToApp">返回APP</button> -->
        <!-- <span class="debbug_msg" style="font-size: 12px;">{{msg}}</span> -->
        <!-- <span class="debbug_msg msg1" style="font-size: 12px;">{{orderInfoStr}}</span> -->
         <!-- <p @click="refreshPapge">刷新</p> -->
        <div class="toast" v-if="toast">
			<span id="toast">{{toast}}</span>
		</div>
	</div>


	<script>
        var baseUrl = 'https://sjx.sojiandan.com/mall'
        // var baseUrl = 'http://192.168.1.113:8096'
        var browser = {
			weChat: navigator.userAgent.indexOf("MicroMessenger") > -1, // 是否微信
			aliPay: !!navigator.userAgent.match(/Alipay/i), // 是否支付宝
		};
        var isWxMini = browser.weChat && navigator.userAgent.toLocaleLowerCase().indexOf('miniprogram') > -1
		let platform = browser.weChat ? 'wechat' : browser.aliPay ? 'alipay' : ''
		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return decodeURIComponent(r[2]);
			return null;
		}

        function qsStringify(data) {
			let str = ''
			for (let key in data) {
				str += (key + '=' + data[key] + '&')
			}
			return str.slice(0, -1)
		}

        try {
            let mchData ={
                action:'onIframeReady',
                displayStyle:'SHOW_CUSTOM_PAGE'
            }
            let postData = JSON.stringify(mchData)
            parent.postMessage(postData,'https://payapp.weixin.qq.com')
        } catch(err) {
            console.log(err);
        }


        new Vue({
			el: '#app',
			data() {
				return {
                    isWxMini: isWxMini,
                    platform: platform,
                    toast: '',
                    msg: '',
                    orderInfo: {},
                    orderInfoStr: ''
                }
            },
            mounted() {
                this.msg = location.search
                this.getOrderInfo()
            },
            methods: {
                // toast提示
				openToast(msg) {
					let that = this
					this.toast = msg
					setTimeout(function () {
						that.toast = ''
					}, 4000)
				},
                getOrderInfo() {
                    let outTradeNo = GetQueryString('out_trade_no')
                    axios({
                    	method: 'post',
                    	url: baseUrl + '/pay/getOrderByOutTradeNo',
                    	Headers: Headers,
                    	data: qsStringify({
                    		outTradeNo: outTradeNo,
                    		merNo: 'S0000260',
                            // appId: 'sjxzl5692',
                            platCode: 'sjxzl5692'
                    	})
                    }).then(res => {
                        if (res.data.code == 1) {
                            this.orderInfo = res.data.data
                            this.orderInfoStr = JSON.stringify(this.orderInfo)
                    	} else {
                            this.openToast(res.data.msg)
                        }
                    }, err => {
                        this.openToast('网络错误')
                    })

                },
                continueSign() {
                    try {
                        let mchData = {
                            action: 'jumpOut',
                            jumpOutUrl: location.origin + '/pages/order/pay?orderNo=' + this.orderInfo.FOrderNo
                        }
                        let postData = JSON.stringify(mchData)
                        parent.postMessage(postData, 'https://payapp.weixin.qq.com')
                    } catch (err) {
                        console.log(err);
                    }

                },
                backToApp() {
                    try {
                        let mchData = {
                            action: 'jumpOut',
                            jumpOutUrl: 'xmcxzCus://'
                        }
                        let postData = JSON.stringify(mchData)
                        parent.postMessage(postData, 'https://payapp.weixin.qq.com')
                    } catch (err) {
                        console.log(err);
                    }

                },
                refreshPapge() {
                    location.reload()
                },
            }
        })

	</script>
</body>
</html>
